{extend name="base" /}
{block name="css"}
<style>
    .user-info-head {
        width: 110px;
        height: 110px;
        position: relative;
        display: inline-block;
        border-radius: 50%;
        border: 2px solid #eee;
    }

    .user-info-head:hover:after {
        content: '\e624';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        color: #eee;
        background: rgba(0, 0, 0, 0.5);
        font-family: layui-icon;
        font-size: 28px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        cursor: pointer;
        line-height: 110px;
        border-radius: 50%;
    }

    .user-info-head img {
        width: 110px;
        height: 110px;
        border-radius: 50%;
    }

    .info-list-item {
        position: relative;
        padding-bottom: 8px;
    }

    .info-list-item > .layui-icon {
        position: absolute;
    }

    .info-list-item > p {
        padding-left: 30px;
    }

    .dash {
        border-bottom: 1px dashed #ccc;
        margin: 15px 0;
    }

    .bd-list-item {
        padding: 14px 0;
        border-bottom: 1px solid #e8e8e8;
        position: relative;
    }

    .bd-list-item .bd-list-item-img {
        width: 48px;
        height: 48px;
        line-height: 48px;
        margin-right: 12px;
        display: inline-block;
        vertical-align: middle;
    }

    .bd-list-item .bd-list-item-content {
        display: inline-block;
        vertical-align: middle;
    }

    .bd-list-item .bd-list-item-lable {
        margin-bottom: 4px;
        color: #333;
    }

    .bd-list-item .bd-list-item-oper {
        position: absolute;
        right: 0;
        top: 50%;
        text-decoration: none !important;
        cursor: pointer;
        transform: translateY(-50%);
    }

    .user-info-form .layui-form-item {
        margin-bottom: 25px;
    }
</style>
{/block}
{block name="body"}
<!-- 左 -->
<div class="layui-col-sm12 layui-col-md3">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 25px;">
            <div class="text-center layui-text">
                <div class="user-info-head" id="imgHead">
                    <img src="{$data.avatar|default='/static/img/no_image_100x100.jpg'}" width="100" height="100"/>
                </div>
                <h2 style="padding-top: 20px;">{$data.name}</h2>
                <p style="padding-top: 8px;">{$data.star}</p>
            </div>
            <div class="layui-text" style="padding-top: 30px;">
                <div class="info-list-item">
                    <i class="layui-icon layui-icon-username"></i>
                    <p>{$data.contact}</p>
                </div>
                <div class="info-list-item">
                    <i class="layui-icon layui-icon-cellphone-fine"></i>
                    <p>{$data.mobile} {$data.phone}</p>
                </div>
                <div class="info-list-item">
                    <i class="layui-icon layui-icon-location"></i>
                    <p>{$data.province}{$data.city}{$data.area} - {$data.address}</p>
                </div>
                <div class="info-list-item">
                    <i class="layui-icon layui-icon-about"></i>
                    <p>{$data.remark}</p>
                </div>
                <div class="info-list-item">
                    <i class="layui-icon layui-icon-log"></i>
                    <p>{$data.create_time}</p>
                </div>
            </div>
            <div class="dash"></div>
            <h3>标签</h3>
            <div class="layui-badge-list" style="padding-top: 6px;">
                <span class="layui-badge layui-bg-cyan">分类:{$data.classify_name}</span>
                <span class="layui-badge layui-bg-gray">来源:{$data.comefrom_name}</span>
                <span class="layui-badge layui-bg-green">状态:{$data.status_name}</span>
            </div>
            <div class="dash"></div>
            <h3>快捷操作</h3>
            <div class="layui-badge-list" style="padding-top: 6px;">
                <a href="{:url('user/customer/edit', ['id' => $data.id])}" data-width="1010px" data-height="590px" class="layui-btn layui-btn-sm layui-btn-normal ajax-iframe"><i class="fa fa-edit"></i> 编辑客户</a>
                <a href="{:url('user/notice/add', ['customer_id' => $data.id])}" data-width="480px" data-height="480px" class="layui-btn layui-btn-sm layui-btn-danger ajax-iframe"><i class="fa fa-bell"></i> 新增提醒</a>
            </div>
        </div>
    </div>
</div>
<!-- 右 -->
<div class="layui-col-sm12 layui-col-md9">
    <div class="layui-card">
        <div class="layui-card-body">

            <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
                <ul class="layui-tab-title">
                    <li class="layui-this">回访记录</li>
                    <li>销售记录</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form toolbar">
                            <div class="layui-form-item">

                                <div class="layui-inline">

                                    <a href="{:url('user/customer/track_add',['customer_id'=>$data['id']])}" class="layui-btn ajax-iframe" data-width="500px" data-height="267px"><i class="fa fa-plus-circle"></i> 新增回访</a>
                                </div>
                            </div>
                        </div>
                        <table id="tableTrack" lay-filter="tableTrack"></table>
                        <!-- 表格操作列 -->
                        <script type="text/html" id="tableTBTrack">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </script>
                    </div>
                    <div class="layui-tab-item">

                        <div class="layui-form toolbar">
                            <div class="layui-form-item">

                                <div class="layui-inline">

                                    <a href="{:url('user/customer/order_add',['customer_id'=>$data['id']])}" class="layui-btn ajax-iframe" data-width="500px" data-height="372px"><i class="fa fa-plus-circle"></i> 新增销售</a>
                                </div>
                            </div>
                        </div>
                        <table id="tableOrder" lay-filter="tableOrder"></table>
                        <!-- 表格操作列 -->
                        <script type="text/html" id="tableTBOrder">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </script>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'dropdown'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var dropdown = layui.dropdown;

        // 渲染回访表格
        var insTb = table.render({
            elem: '#tableTrack',
            url: "{:url('user/customer/json_track',['customer_id'=>$data['id']])}",
            page: true,
            cols: [[
                {field: 'update_time', align: 'center', sort: true, title: '时间', width: 200},
                {field: 'user_name', align: 'center', sort: true, title: '用户',},
                {field: 'remark', align: 'center', sort: true, title: '回访详情'},
                {align: 'center', toolbar: '#tableTBTrack', title: '操作', minWidth: 200}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });
        
        //监听工具条
        table.on('tool(tableTrack)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            console.log(data.id);
            if (layEvent === 'edit') { // 查看
                 showEditModel(data.id);
            } else if (layEvent === 'del') { // 删除
                DelModel(data.id);
            }
            dropdown.hideAll();
        });
        
        // 显示表单弹窗
        function showEditModel(id) {
            var layIndex = layer.open({
                type: 2,
                anim: 5,
                title: "修改回访",
                shadeClose:true,
                content: "{:url('user/customer/track_edit')}?id=" + id,
                data: { sadfa: id },       // 使用data参数传值给弹窗页面
                area: ['500px', '267px'],

            });
            return false;
        }
        //删除
        function DelModel(id){
            layer.confirm('确定删除？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                var index = layer.msg('删除中，请稍候', {
                    icon: 16,
                    time: false,
                    shade: 0.3
                });
                $.ajax({
                    url: "{:url('user/customer/track_del')}?id=" + id,
                    type: 'post',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code === 1 && result.url != '') {
                            setTimeout(function () {
                                location.href = result.url;
                            }, 1000);
                        }
                        layer.close(index);
                        layer.msg(result.msg);
                    },
                    error: function (xhr, state, errorThrown) {
                        layer.close(index);
                        layer.msg(state + '：' + errorThrown);
                    }
                });
            });
            return false;
        }
        // 渲染销售表格
        var insTb = table.render({
            elem: '#tableOrder',
            url: "{:url('user/customer/json_order',['customer_id'=>$data['id']])}",
            page: true,
            cols: [[
                {field: 'update_time', align: 'center', sort: true, title: '时间', width: 200},
                {field: 'user_name', align: 'center', sort: true, title: '用户',},
                {field: 'price', align: 'center', sort: true, title: '金额',},
                {field: 'classify_name', align: 'center', sort: true, title: '分类',},
                {field: 'remark', align: 'center', sort: true, title: '销售详情'},
                {align: 'center', toolbar: '#tableTBTrack', title: '操作', minWidth: 200}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });
        //监听工具条
        table.on('tool(tableOrder)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            console.log(data.id);
            if (layEvent === 'edit') { // 查看
                 showEditOrderModel(data.id);
            } else if (layEvent === 'del') { // 删除
                DelOrderModel(data.id);
            }
            dropdown.hideAll();
        });
        // 显示表单弹窗
        function showEditOrderModel(id) {
            var layIndex = layer.open({
                type: 2,
                anim: 5,
                title: "修改销售",
                shadeClose:true,
                content: "{:url('user/customer/order_edit')}?id=" + id,
                area: ['500px', '372px'],

            });
            return false;
        }
        //删除
        function DelOrderModel(id){
            layer.confirm('确定删除？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                var index = layer.msg('删除中，请稍候', {
                    icon: 16,
                    time: false,
                    shade: 0.3
                });
                $.ajax({
                    url: "{:url('user/customer/order_del')}?id=" + id,
                    type: 'post',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code === 1 && result.url != '') {
                            setTimeout(function () {
                                location.href = result.url;
                            }, 1000);
                        }
                        layer.close(index);
                        layer.msg(result.msg);
                    },
                    error: function (xhr, state, errorThrown) {
                        layer.close(index);
                        layer.msg(state + '：' + errorThrown);
                    }
                });
            });
            return false;
        }
        
    });
</script>
{/block}